<template>
  <div class="app-container">
    <div v-if="isList">
      <div class="flex mb-4">
        <div>
          <p class="text-xl mb-2">筛选</p>
          <div class="flex flex-wrap">
            <div class="flex items-center marginRB10">
              <span class="w-20">公司名称：</span>
              <el-input v-model="listQuery.company_name" clearable placeholder="公司名称" style="width:200px;"></el-input>
            </div>
            <div class="flex items-center marginRB10">
              <span class="w-20">公司ID：</span>
              <el-input v-model="listQuery.company_id" clearable placeholder="公司ID" style="width:200px;"></el-input>
            </div>
            <div class="flex items-center marginRB10">
              <span class="w-20">用户昵称：</span>
              <el-input v-model="listQuery.nickname" clearable placeholder="用户昵称" style="width:200px;"></el-input>
            </div>
            <div class="flex items-center marginRB10">
              <span class="w-20">用户编号：</span>
              <el-input v-model="listQuery.user_code" clearable placeholder="用户编号" style="width:200px;"></el-input>
            </div>
            <div>
              <span class="w-20">日期范围：</span>
              <el-date-picker
                v-model="times"
                type="datetimerange"
                class="marginRB10"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleTimesChange">
              </el-date-picker>
            </div>
            <div>
              <span class="w-20">邀请方式：</span>
              <el-select v-model.number="listQuery.channel_type"
                class="filter-item marginRB10"
                filterable
                placeholder="请选择邀请方式"
                style="width: 200px"
              >
                <el-option
                  v-for="item in selectList"
                  :key="item.key"
                  :label="item.lab"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="flex justify-start items-start mt-9">
          <el-button icon="el-icon-search" type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSubmit">重置</el-button>
        </div>
      </div>

      <p class="text-xl mb-2">用户列表</p>
      <el-table ref="dataList" :data="menuList" border row-key="id" style="margin-bottom: 20px;">
        <el-table-column label="用户ID" prop="user_id"></el-table-column>
        <el-table-column label="用户编号" prop="user_code"></el-table-column>
        <!-- <el-table-column :index="indexMethod" type="index" width="150" label="编号"></el-table-column> -->
        <el-table-column label="用户昵称" prop="nickname"></el-table-column>
        <el-table-column label="充值金额（元）" prop="recharge_total" sortable></el-table-column>
        <el-table-column label="手机号" prop="mobile">
          <template slot-scope="{row: {mobile}}">
            <span>{{ mobile.slice(0, 3) + '****' + mobile.slice(mobile.length - 4) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邀请方式" prop="channel_type_text"></el-table-column>
        <el-table-column label="注册时间" prop="register_time" sortable></el-table-column>
        <el-table-column label="公司名称" prop="company_name"></el-table-column>
        <el-table-column label="公司ID" prop="company_id"></el-table-column>

      </el-table>
      <!-- 分页 -->
      <cus-pagination v-show="total>0" :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total"
                      @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { channelUserList } from '@/api/company'

export default {
  data() {
    return {
      times: [],
      selectList: [
        { key: 1, lab: '链接 ' },
        { key: 2, lab: '邀请码' },
        { key: 3, lab: '搜索短码' }
      ],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
      },
      selectList2: [{ key: undefined, lab: '全部分类' }, { key: '1', lab: '房间礼物 ' }, { key: '2', lab: '游戏礼物' }],
      menuList: [],
      menuList1: [],
      total1: 0,
      listQuery1: {
        page: 1,
        perPage: 10
      },
      privateChatForm: {
        user_id: '',
        user_code: '',
        nickname: '',
        content: ''
      },
      roomChatForm: {
        user_id: '',
        room_id: '',
        room_name: '',
        content: ''
      },
      menuList2: [],
      total2: 0,
      listQuery2: {
        page: 1,
        perPage: 10
      },
      menuList3: [],
      pagination3: {},   // 私聊记录分页信息
      total3: 0,
      listQuery3: {
        page: 1,
        perPage: 10
      },
      menuList4: [],
      pagination4: {},
      total4: 0,
      listQuery4: {
        page: 1,
        perPage: 10
      },
      headerList: {},
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      isList: true,
      listNum: 1,
      listUser_id: '',
      form: {
        id: undefined,
        name: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      }
    }
  },
  created() {
    if (this.$route.query.company_id) {
      this.listQuery.company_id = this.$route.query.company_id
    }
    this.getList()
  },
  methods: {
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
    },
    getList() {
      this.listLoading = true
      let obj = {}
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      channelUserList(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.headerList = response.data.header
        this.total = response.data.meta.total
        response.data.header.channel_no = this.$route.query.channel_no
        this.listLoading = false
      })
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    },
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    },
    resetSubmit() {
      this.listQuery = {
        page: 1,
        perPage: 10
      }
      this.times = []
      this.getList()
    },
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
    },
    handleTimesChange(val) {
      if(val) {
        this.listQuery.start_time = val[0]
        this.listQuery.end_time = val[1]
      }else{
        this.listQuery.start_time = undefined
        this.listQuery.end_time = undefined
      }
    }
  }
}
</script>
